import React, { Component } from 'react';

import Img_2 from '../images/1.jpg'
import Img_3 from '../images/1.svg'

import Top_bar from '../top_bar/top_bar';
import Main_nav from '../main_nav/main_nav'
import News from '../news/news'
import Menu from '../menu/menu'
import './cart.css'

import { shoppingCart } from '../../utils/api'

export default class Cart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            num: 1
        }
    }
    componentDidMount() {
        // let token = {token:localStorage.getItem('token')}
        // console.log("=========>", token)

        let data = {}
        // console.log("======>", data)
        shoppingCart(data).then((res) => {
            console.log(res, '购物车查询')

            this.setState(() => {
                return {
                    data: res.data.data == '' ? [] : res.data.data.list,
                }
            })
        })
    }

    goShoppingM = () => {
        this.props.history.push('/product_list')
    }

    render() {
        
        return (
            <div>
                <Top_bar {...this.props} />
                <Main_nav {...this.props} />

                <div className="shopping_cart">
                    <div className="collection_nav-one">
                        <div className="collection_nav-two">
                            <font style={{ verticalAlign: 'inherit' }}>
                                <font style={{ verticalAlign: 'inherit' }}>购物车</font>
                            </font>
                        </div>
                    </div>
                    <div className="cart-section">
                        {
                            this.state.data.map((item, index) => {
                                return item.list = null ? (
                                    <div className="offset-by offset-by-one" key={index}>
                                        <div className="offset-by-two">
                                            <div className="offset-by-three">
                                                <div className="quote">
                                                    <font style={{ verticalAlign: 'inherit' }}>
                                                        <font style={{ verticalAlign: 'inherit' }}>在您的购物车中没有商品。</font>
                                                    </font>
                                                </div>
                                                <div className="continue-button">
                                                    <div onClick={this.goShoppingM.bind(this)} className="add-to-cart">
                                                        <font style={{ verticalAlign: 'inherit' }}>
                                                            <font style={{ verticalAlign: 'inherit' }}>继续购物</font>
                                                        </font>
                                                    </div>
                                                </div>
                                            </div>
                                            <br className="clear" />
                                        </div>
                                    </div>
                                ) : (
                                        <div className="one-whole whole" key={index}>
                                            <div className="one_whole">
                                                <div className="alpha">
                                                    <a href="#" className="cart_page_image">
                                                        <div className="image-element_wrap">
                                                            <img src={Img_2} alt="" />
                                                        </div>
                                                    </a>
                                                </div>
                                                <div className="omega cart_content_info">
                                                    <div className="omega-one">
                                                        <a href="#">
                                                            <font style={{ verticalAlign: 'inherit' }}>
                                                                <font style={{ verticalAlign: 'inherit', color: '#454545' }}>HAHA小丑运动衫秋季黑色3D印花连帽外套</font>
                                                            </font>
                                                        </a>
                                                    </div>
                                                    <div className="meta">
                                                        <span className="label">
                                                            <font style={{ verticalAlign: 'inherit' }}>
                                                                <font style={{ verticalAlign: 'inherit' }}>尺码：</font>
                                                            </font>
                                                        </span>
                                                        <span>
                                                            <font style={{ verticalAlign: 'inherit' }}>
                                                                <font style={{ verticalAlign: 'inherit' }}>S</font>
                                                            </font>
                                                        </span>
                                                        <br />
                                                    </div>
                                                    <div className="modal_price">
                                                        <span className="money">
                                                            <font style={{ verticalAlign: 'inherit' }}>
                                                                <font style={{ verticalAlign: 'inherit' }}>$ 45.99 </font>
                                                            </font>
                                                        </span>
                                                        <span className="money was_price">
                                                            <font style={{ verticalAlign: 'inherit' }}>
                                                                <font style={{ verticalAlign: 'inherit' }}>$ 91.98</font>
                                                            </font>
                                                        </span>
                                                    </div>
                                                    <div className="product-quantity-box left">
                                                        <span onClick={this.shopCountAM.bind(this)} className="ss-icon-two  product-minus">
                                                            <span className="icon-minus">-</span>
                                                        </span>
                                                        <input type="tel" className="quantity-two" value={this.state.num} />
                                                        <span onClick={this.shopCountIM.bind(this)} className="ss-icon-two product-plus">
                                                            <span className="icon-plus">+</span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    )
                            })
                        }
                        <div className="two-whole">
                            <div className="section clearfix">
                                <div className="subtotal">
                                    <div className="cart_subtotal js-cart_subtotal">
                                        <span className="right_sale">
                                            <span className="money" data-currency-usd="$45.99">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>$ 45.99</font>
                                                </font>
                                            </span>
                                        </span>
                                        <span>
                                            <font style={{ verticalAlign: 'inherit' }}>
                                                <font style={{ verticalAlign: 'inherit' }}>小计</font>
                                            </font>
                                        </span>
                                    </div>
                                    <div className="cart_savings sale">
                                        <span className="right_sale">
                                            <span className="money" data-currency-usd="$45.99">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>$ 45.99</font>
                                                </font>
                                            </span>
                                        </span>
                                        <span>
                                            <font style={{ verticalAlign: 'inherit' }}>
                                                <font style={{ verticalAlign: 'inherit' }}>总储蓄</font>
                                            </font>
                                        </span>
                                    </div>
                                    <div className="order-processing">
                                        <font style={{ verticalAlign: 'inherit' }}>
                                            <font style={{ verticalAlign: 'inherit' }}>订单将以美元处理。</font>
                                        </font>
                                    </div>
                                    <div>
                                        <button type="submit" className="shopping-cart_button">
                                            <font style={{ verticalAlign: 'inherit' }}>
                                                <font style={{ verticalAlign: 'inherit' }}>退房</font>
                                            </font>
                                        </button>
                                    </div>
                                    <div className="shopify-clean-slate">
                                        <a href="#">
                                            <div className="shopify__clean">
                                                <img src={Img_3} />
                                            </div>
                                        </a>
                                    </div>
                                    <div className="featured-links">
                                        <div className="second_button">
                                            <font style={{ verticalAlign: 'inherit' }}>
                                                <font onClick={this.goShoppingM.bind(this)}
                                                    style={{ verticalAlign: 'inherit' }}>继续购物</font>
                                            </font>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <News {...this.props} />
                <Menu {...this.props} />
            </div>
        );
    }
    shopCountAM = () => {
        this.setState({
            num: (this.state.num - 1) >= 1?(this.state.num - 1):1
        })
    }
    shopCountIM = () => {
        this.setState({
            num: this.state.num + 1
        })
    }
}